<template>
    <div class="leftContentOne">
        <!--第一部分-->
            <div class="hangzhou" >
                <div class="hangzhouImg lf">
                </div>
                <ul class="hangzhouD lf">
                    <li  class="hangzhouName" @click="showStationName">{{this.$store.state.headerCounty}}
                        <span class="iconfont" style="font-size:24px">&#xe68c;</span>
                        <common-selects v-if="isSelect"></common-selects>
                    </li>
                    <!-- <li class="hangzhouAssess">II 拉拉清新</li> -->
                    <li class="hangzhouAssess" :style="{background:color[CountryEPAdata.Level-1]}">{{ CountryEPAdata.QXDJ}}</li>
                    <li class="hangzhouNum">
                        <span class="bigNum">{{parseInt(CountryEPAdata.negative_K04)}}</span>
                        /{{parseInt(CountryEPAdata.MaxNegative_K04)}}
                        <span class="darkNum">负氧离子(个/cm3)</span>
                    </li>
                </ul>
            </div>
            <div class="onData">
                <!--宽窄竖线-->
                <div class="doubleLine lf">
                    <div class="wide lf"></div>
                    <div class="narrow lf"></div>
                </div>
                <!--浙江省-->
                <div class="zjProvince lf">
                    <div class="provinceName lf">实时数据</div>
                </div>
                <div class="nowTime ">
                     {{this.$store.state.year+' '+this.$store.state.time}}
                </div>
            </div>
            <div class="threeLine">
                <div class="firstLine lf"></div>
                <div class="secondLine lf"></div>
                <div class="thirdLine lf"></div>
            </div>
            <div class="hbData">
                <div class="hbDataLi" >
                    <span class="iconfont">&#xe62b;</span>
                    <span>{{parseInt(CountryEPAdata.negative_K04)}}/{{parseInt(CountryEPAdata.MaxNegative_K04)}}</span>  
                </div>
                <div class="hbDataPM">
                    <div class="lf">
                        <div class="iconfont">&#xe60a;</div>
                        <div>PM<span style="word-wrap: normal; word-break: normal; line-height: 18px; font-family: TimesnewromanpsMT, serif; font-size: 9pt;">2.5</span></div>
                    </div>
                    <div class="lf">
                        <div>{{parseInt(AllCountryAqi.PM25DATA)}}</div>
                        <div>(μg/m³)</div>
                    </div>
                    
                </div>
                <div class="hbDataO" >
                   <div  class="lf">
                        <div class="iconfont">&#xe633;</div>
                        <div>O₃</div>
                    </div>
                    <div  class="lf">
                        <div>{{parseInt(AllCountryAqi.O31DATA)}}</div>
                        <div>(μg/m³)</div>
                    </div>
                </div>
            </div>
            <div class="weatherData" v-if="weatherList">
                <div class="onDayWeather"  v-for="(item, index) of weatherList.data.forecast" :key="index" v-if="index<5" :class="{active: isIndex==index}">
                    <div class="onDayWeatherDate">
                        {{item.date}}
                    </div>
                    <div class="onDayWeatherImg">
                        <!-- <img src="/tianqi.png" alt="" style="height:3.4vh"> -->
                        <svg class="icon" aria-hidden="true" style="font-size:45px">
                            <use :xlink:href="'#'+getWeatherPic(item.type)"></use>
                        </svg>
                        <!-- <span class="iconfont" v-html="getWeatherPic(item.type)" style="height:3.4vh;color:yellow;font-size:.50rem"></span> -->
                    </div>
                    <div class="onDayWeatherDu">
                        {{parseInt(item.low.substring(2))}} ~ {{parseInt(item.high.substring(2))}} ℃
                    </div>
                    <div class="onDayWeatherRain">
                        {{item.type}}
                    </div>
                    <div class="onDayWeatherWind">
                        {{item.fx}}
                    </div>
                    <!-- <div class="onDayWeatherLevel">
                        <div class="haveBG">
                            优
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
</template>

<script>
import CommonSelects from "../../commons/CommonSelects"
let echarts = require('echarts');
export default {
    name: 'CountryLeftContentOne',
    components: {
        CommonSelects
    },
    props: {
        weatherList: Object,
        CountryEPAdata: Object,
        AllCountryAqi: Object 
    },
     computed:{
        weatherPicData(){
            return this.$store.state.weatherPicData
        }
    },
    data(){
        return{
            isSelect:false,
            getCityName:this.$route.params.name,
            isIndex: 0,
            tiaozhuan: '',
            weatherPic: '',
            proTime: '',
            timer: null,
            
            color:["#0CDE4E","#32F3A9","#63B5E6","#6AA6C9","#737373","#737373"]
        }
    },
    watch:{
        CountryEPAdata: function(val){
            switch(val.Level){
                case 1:{
                    val.levelName="I";
                    break;
                }
                case 2:{
                    val.levelName="II";
                    break;
                }
                case 3:{
                    val.levelName="III";
                    break;
                }
                case 4:{
                    val.levelName="IV";
                    break;
                }
                case 5:{
                    val.levelName="VI";
                    break;
                }
            };  
            this.cityEPAdata=val       
        }
    },
    methods: {
        showStationName(){
            this.isSelect = !this.isSelect
        },
        weatherMouseOver: function(index){
            this.isIndex = index
        },
        tiaozhuanF(){
            if(this.getCityName =="杭州"){
                this.tiaozhuan="西湖观测点"
            }
        },
        gaibianStation(stationName){
            this.$store.commit('changeStationName', stationName)
            this.$comjs.onCenter(120.155161,30.236581,80000.0)
            this.$comjs.addCSMarkerss();
        },
        getWeatherPic(type){
            for(let i=0;i<this.weatherPicData.length;i++){
                if(this.weatherPicData[i][0] == type){
                    return this.weatherPicData[i][1];             
                    break;
                }
            }         
        },        
    }
   
   
}
</script>

<style lang="stylus" scoped>
    /* 样式穿透 */
    .leftContentOne >>> a
        color: white
        text-decoration :none
    /* 所有样式 */
    .leftContentOne
        width: 4.04rem
        height: 46.5vh
        color: white
        background :rgba(7,23,42,0.49)
        overflow: hidden
        .hangzhou
            width: 3.86rem 
            height: 8.24vh
            margin-left: .18rem
            margin-top: 2.59vh
            margin-bottom : 3.05vh
            .hangzhouImg
                width: 1.57rem
                height: 8.24vh
                border: 1px solid #FFF
                background : url('/jiang.jpg') no-repeat 
                background-size:cover
            .hangzhouD
                width: 2.19rem
                overflow: hidden
                margin-left: .1rem
                .hangzhouName
                    height: 2.13vh
                    font-size: .24rem
                .hangzhouAssess
                    margin-top: .83vh
                    margin-bottom: 1.1vh
                    width:.98rem
                    height: 2.22vh
                    line-height :2.22vh
                    font-size: 0.16rem
                    text-align :center
                    // background :#32F3A9
                .hangzhouNum
                    width: 100%
                    font-size: .15rem
                    .bigNum
                        font-size: .2rem
                    .darkNum
                        font-size: .1rem
                        color: #ADADAD
                        margin-left: .1rem
        .onData
            height: 3.5vh
            .doubleLine
                width: .11rem
                height: 2.77vh
                .wide
                    width: .07rem
                    height: 2.77vh
                    background : #41E6FD
                .narrow
                    width: .02rem
                    height: 2.77vh
                    background : #41E6FD
                    margin-left: .02rem
            .zjProvince
                font-size: .18rem
                line-height: 2.77vh
                .provinceName
                    font-size: .18rem
                    font-family: FZZXHJW--GB1-0
                    margin-left: .12rem
            .nowTime
                float: right
                font-size: .16rem
                line-height: 2.77vh
                margin-right: .05rem
        .threeLine
            width: 100%
            height: .03px
            .firstLine
                width: 3.4rem
                height: .03rem
                background : #41E6FD
            .secondLine
                width: .08rem
                height: .03rem
                background: #333
                margin-left: .06rem
                margin-right: .04rem
            .thirdLine
                width: .44rem
                height: .03rem
                background: #FFFFFF
        .hbData
            display:flex
            justify-content: space-around
            margin: 0 auto
            margin-top:2.22vh
            height: 4.63vh
            font-size: .2rem
            .hbDataLi
                span:first-child
                    font-size:larger
                span:nth-child(2)
                    color:#58EBFF
                    font-size: small
            .hbDataPM
                text-align :center
                margin-left: 1vw
                margin-right: 1vw
                div:nth-child(1)
                    div
                        font-size: larger
                div:nth-child(2)
                    div:nth-child(1)
                        color:#58EBFF
                        font-size: small
                        line-height:2.5vh
                    div:nth-child(2)
                        color:#A9A9A9
                        margin-left:.05rem
                        font-size: .1rem
                div:nth-child(1)
                    div:nth-child(1)
                        height:2.5vh
                    div:nth-child(2)
                        color:#A9A9A9
                        font-size: small
            .hbDataO
                div:nth-child(1)
                    div
                        font-size: larger
                div:nth-child(2)
                    text-align :center
                    div:nth-child(1)
                        color:#58EBFF
                        font-size: small
                        line-height:2.5vh
                    div:nth-child(2)
                        color:#A9A9A9
                        margin-left:.05rem
                        font-size: .1rem
                div:nth-child(1)
                    div:nth-child(1)
                        height:2.5vh
                    div:nth-child(2)
                        color:#A9A9A9
                        font-size: .1rem
        .weatherData
            height:17.92vh
            margin-top: 3.9vh
            text-align :center
            // margin-left: .38rem
            display: flex
            justify-content : space-around
            .onDayWeather
                width: .54rem
                height: 16.4vh
                border-left: 1px solid #7D7D7D
                text-align :center
                flex:  1 
                .onDayWeatherDate
                    line-height: 2.4vh
                    font-size: .16rem 
                    text-align :center
                .onDayWeatherImg
                    height: 4.4vh
                    line-height: .4vh
                .onDayWeatherDu
                    line-height : 2.4vh
                    font-size: .1rem
                .onDayWeatherRain
                    font-size: .1rem
                    line-height : 2.4vh
                .onDayWeatherWind
                    line-height : 2.4vh
                    font-size: .1rem
                .onDayWeatherLevel
                    height:2.4vh
                    font-size: .12rem
                    overflow: hidden
                    .haveBG
                        width:.35rem
                        line-height: 1.7vh
                        margin: 0 auto
                        margin-top: 0.4vh
                        background : #22AC38
            .onDayWeather:first-child
                border:none  
                flex: 1.5     
            .onDayWeather.active
                text-align :center
                background:rgba(13,131,214,0.52)
                width:1.06rem
            .onDayWeather.active .onDayWeatherRain
                background : rgba(13,131,214,0.52)
            .onDayWeather.active .onDayWeatherLevel
                background : rgba(13,131,214,0.52)
        
        
                        
</style>


